<template>
  <div>
    <NuxtLayout name="home-page" :title="title">
      <AnnLoading :loading="loading">
        <div class="album-detail flex flex-wrap justify-center gap-10 m-10" v-if="totalNum > 0">
          <div v-for="item in albums" :key="item.albumId"
               class="card w-80 h-56 cursor-pointer bg-base-200 shadow-xl image-full"
               @click="viewPhoto(item.albumId)">
            <figure class="h-56">
              <img :src="item.albumImage" class="object-contain w-full h-full" alt="albumImage"/>
            </figure>
            <div class="card-body">
              <h2 class="card-title">{{ item.albumName }}</h2>
              <p>{{ item.albumDesc }}</p>
            </div>
          </div>
        </div>
        <AnnEmptyPage v-else/>
      </AnnLoading>
      <!-- 翻页按钮 -->
      <AnnPagination
          :totalNum="totalNum"
          :totalPages="totalPages"
          :pageSize="queryParams.pageSize"
          :pageNum="queryParams.pageNum"
          @changePage="changePage"
      />
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
import type {BlogAlbumWebVO} from "~/api/album/types";
import {queryAlbumList} from "~/api/album";
// 固定页面信息
const title = ref<string>("相册")
useHead({
  title: title.value,
  titleTemplate: title => `${title} - Annlcc's Blog`,
})
const loading = ref(true)
const queryParams: PageQuery = reactive({
  pageNum: 1,
  pageSize: 6,
});
const totalNum = ref();
const totalPages = ref(1);
const albums = ref<BlogAlbumWebVO[]>();

const viewPhoto = (albumId: string | number) => {
  navigateTo(`/album/${albumId}`)
};
// 查询相册方法
const handleAlbumList = async (queryParams: PageQuery) => {
  loading.value = true
  // 获取相册列表
  const {data: res} = await useAsyncData("queryAlbumList", () =>
      queryAlbumList(queryParams)
  );
  albums.value = res.value?.rows
  totalNum.value = res.value?.total;
  totalPages.value = Math.ceil(totalNum.value / queryParams.pageSize);
  loading.value = false
};
const changePage = async (pageNum: number) => {
  queryParams.pageNum = pageNum
  await handleAlbumList(queryParams)
}

handleAlbumList(queryParams);
</script>
<style lang="less" scoped>
.card {
  position: relative;
  overflow: hidden; /* 设置溢出隐藏 */
}

.card img {
  transition: transform 0.3s ease-in-out; /* 添加缩放过渡效果 */
}

.card:hover img {
  transform: scale(1.1); /* 悬停时缩放图片 */
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.4s ease-in-out;
}

.card:hover::before {
  opacity: 1;
}

.card::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.card:hover::after {
  opacity: 1;
}
</style>
